<template>
	<view class="dkfpsq">
		<!-- 		<view class="pageTitle">
			<text>代开发票授权</text>
		</view> -->
		<nsrBar @nsrGX="nsrGx"></nsrBar>
		<view class="main">
			<view class="xzsq" @click="addSq">
				+新增授权
			</view>
			<view class="title">
				<view class="tm" v-if="nsrlx==0">我的授权</view>
				<view class="tm" v-else>我的申请</view>
				<view class="search" @click="toggle('bottom')">筛选</view>
			</view>
			<uni-popup ref="popup" type="bottom" :show="pShow">
				<view class="conSearch">
					<view class="cxTitle">
						<view class="cxMc">筛选条件</view>
						<uni-icons type="closeempty" @click="closeToggle()"></uni-icons>
					</view>
					<view class="xzItem">
						<view class="name">房屋地址</view>
						<view class="con">
							<input type="text" v-model="address" style="width: 100%;" placeholder="请输入房源地址" />
						</view>
					</view>
					<view class="xzItem">
						<view class="name">授权申请日期</view>
						<view class="con">
							<view>{{sqrq}}</view>
							<pickerTime fields="date" @dateChange="sqrqChange"></pickerTime>
						</view>
					</view>
					<view class="xzItem">
						<view class="name">授权状态</view>
						<view class="con">
							<view>{{sqzt.codeName}}</view>
							<pickerZdy :listArray="sqztArr" @pickerChange="sqztSxChange" label="codeName"></pickerZdy>
						</view>
					</view>
				</view>
				<view class="btn">
					<button type="primary" class="qrbtn" size="mini" @click="handleSearch('cxBtn')">确定</button>
					<button type="default" plain="true" class="qrbtn" size="mini" @click="handleReset">重置</button>
				</view>
			</uni-popup>
			<view class="box" v-for="(item,index) in sqxxArr" :index="index" v-if="nsrlx=='0'">
				<view class="item">
					<view class="name">授权人</view>
					<view class="sqrxx">
						<view class="val">{{item.nsrmc}} ({{item.nsrzjhm}})</view>
						<view v-if="item.sqzt=='04'" class="sqztYzf">{{item.sqztmc}}</view>
						<view v-if="item.sqzt=='03'" class="sqztYzf">{{item.sqztmc}}</view>
						<view v-if="item.sqzt=='02'" class="sqztYsx">{{item.sqztmc}}</view>
						<view v-if="item.sqzt=='01'" class="sqztDqr">{{item.sqztmc}}</view>
					</view>
				</view>
				<view class="item">
					<view class="name">被授权人</view>
					<view class="val">{{item.czrmc}} ({{item.czrzjhm}})</view>
				</view>
				<view class="item">
					<view class="name">房屋地址</view>
					<view class="val">{{item.address}}</view>
				</view>
				<view class="item">
					<view class="name">租赁编号</view>
					<view class="val">{{item.rentCode}}</view>
				</view>
				<view class="item">
					<view class="name">租金所属期</view>
					<view class="val">{{item.startDate}}至{{item.endDate}}</view>
				</view>
				<view class="item">
					<view class="name">授权所属期</view>
					<view class="val">{{item.rentSsqq.slice(0,10)}}至{{item.rentSsqz.slice(0,10)}}</view>
				</view>
				<view class="item">
					<view class="name">授权有效期限</view>
					<view class="val">{{item.sqyxqz.slice(0,10)}}截止</view>
				</view>
				<view class="item">
					<view class="name">授权日期</view>
					<view class="val">{{item.cjsj}}</view>
				</view>
				<view class="sqBtn" v-if="item.sqzt=='01'">
					<view class="btnItem btysq" @click="sqztChange(item,'04','请确定不同意当前授权申请？','不同意授权成功')">不同意授权</view>
					<view class="btnItem tysq" @click="sqztChange(item,'02','请确定同意当前授权申请？','授权成功')">确认授权</view>
				</view>
				<view class="sqBtn" v-if="item.sqzt=='02'">
					<view class="btnItem qxsq" @click="sqztChange(item,'03','请确定是否取消当前授权？','取消成功')">取消授权</view>
				</view>
			</view>
			<view v-if="nsrlx=='1'" class="box" v-for="(item,index) in sqxxArr" :index="index">
				<view class="item">
					<view class="name">授权人</view>
					<view class="sqrxx">
						<view class="val">{{item.nsrmc}} ({{item.nsrzjhm}})</view>
						<view v-if="item.sqzt=='04'" class="sqztYzf">{{item.sqztmc}}</view>
						<view v-if="item.sqzt=='03'" class="sqztYzf">{{item.sqztmc}}</view>
						<view v-if="item.sqzt=='02'" class="sqztYsx">{{item.sqztmc}}</view>
						<view v-if="item.sqzt=='01'" class="sqztDqr">{{item.sqztmc}}</view>
					</view>
				</view>
				<view class="item">
					<view class="name">被授权人</view>
					<view class="val">{{item.czrmc}} ({{item.czrzjhm}})</view>
				</view>
				<view class="item">
					<view class="name">房屋地址</view>
					<view class="val">{{item.address}}</view>
				</view>
				<view class="item">
					<view class="name">租赁编号</view>
					<view class="val">{{item.rentCode}}</view>
				</view>
				<view class="item">
					<view class="name">租金所属期</view>
					<view class="val">{{item.startDate}}至{{item.endDate}}</view>
				</view>
				<view class="item">
					<view class="name">授权所属期</view>
					<view class="val">{{item.rentSsqq.slice(0,10)}}至{{item.rentSsqz.slice(0,10)}}</view>
				</view>
				<view class="item">
					<view class="name">授权有效期限</view>
					<view class="val">{{item.sqyxqz.slice(0,10)}}</view>
				</view>
				<view class="item">
					<view class="name">授权日期</view>
					<view class="val">{{item.cjsj}}</view>
				</view>
			</view>
			<view class="zwsj" v-if="sqxxArr.length==0">
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	import nsrBar from "@/components/nsrBar.vue"
	import pickerZdy from "@/components/pickerZdy.vue"
	import pickerTime from "@/components/pickerTime.vue"
	import {
		pageSqxx,
		getTyByQO,
		updateSqzt
	} from "@/utils/common-api.js"
	import commonTools from "@/utils/common-tools.js";
	export default {
		name: "dkfpsq",
		data() {
			return {
				userInfo: commonTools.getUserInfo() || {},
				// 查询数据
				address: "",
				sqrq: "",
				sqzt: "",
				nsrlx: 0,
				sqxxArr: [],
				pShow: false,
				sqztArr: [],
				page: {
					total: 0,
					pageIndex: 1,
					pageSize: 10,
				},
			};
		},
		components: {
			nsrBar,
			pickerZdy,
			pickerTime
		},
		onShow() {
			this.handleSearch("onShow")
			this.getSqzt()
		},
		onReachBottom() {
			this.handleSearchEnd()
		},
		methods: {
			// 纳税人切换
			nsrGx(val) {
				this.nsrlx = val
				this.handleSearch("cxBtn")
			},
			// 筛选-授权申请日期修改
			sqrqChange(val) {
				this.sqrq = val
			},
			// 筛选=授权状态修改
			sqztSxChange(val) {
				this.sqzt = this.sqztArr[val]
			},
			// 触底请求
			handleSearchEnd() {
				if (this.page.pageIndex * this.page.pageSize < this.page.total) {
					this.page.pageIndex = this.page.pageIndex + 1
					this.handleSearch()
				}
			},
			// 查询
			async handleSearch(val) {
				// 重新进入页面、根据筛选条件查询数据重置
				if (val == "cxBtn" || val == "onShow") {
					this.sqxxArr = []
					this.page = {
						total: 0,
						pageIndex: 1,
						pageSize: 10,
					}
				}

				let params = {
					nsrlx: this.nsrlx,
					sqrq: this.sqrq,
					address: this.address,
					sqzt: this.sqzt ? this.sqzt.code : "",
					...this.page
				}

				let res = await pageSqxx(params)
				if (res.head.errorCode == "0") {
					this.sqxxArr = this.sqxxArr.concat(res.body.data)
					this.page.total = res.body.pager.recordCount
					if (val == "cxBtn" || val == "onShow") {
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 0
						})
						this.closeToggle()
					}
				} else if (res.head.errorCode != "0") {
					uni.showToast({
						title: '数据请求失败',
						icon: 'error',
						duration: 3000
					})
				}
			},
			// 重置
			handleReset() {
				this.address = ""
				this.sqrq = ""
				this.sqzt = ""
				this.handleSearch("cxBtn")
			},
			// 新增授权
			addSq() {
				let params = {
					nsrlx: this.nsrlx
				}
				uni.navigateTo({
					url: "/pages/dkfpsq/addSq?data=" + JSON.stringify(params)
				})
			},
			sqztChange(val, sqzt, msg, title) {
				uni.showModal({
					title: '提示',
					content: msg,
					confirmColor: '#007aff', //确定字体颜色
					buttonText: '确定',
					success: async (res) => {
						if (res.confirm) {
							let res = await updateSqzt({
								id: val.sqId,
								sqzt: sqzt
							})
							if (res.body && res.head.errorCode == "0") {
								// await this.handleSearch("sqztXg")
								this.sqxxArr = this.sqxxArr.map(item => {
									if (JSON.stringify(item) == JSON.stringify(val)) {
										item.sqzt = sqzt
										item.sqztmc = this.$commonCzwjs.getTypeMc(sqzt, this.sqztArr)
									}
									return item
								})
								uni.showToast({
									title: title,
									icon: 'error',
									duration: 1000
								});
							} else if (res.head.errorCode != "0") {
								uni.showToast({
									title: '数据请求失败',
									icon: 'error',
									duration: 3000
								})
							}
						} else {

						}
					}
				});
			},
			// 筛选（底部弹出框）
			toggle(type) {
				this.$refs.popup.open(type)
			},
			// 筛选关闭（底部弹出框）
			closeToggle(type) {
				this.$refs.popup.close("bottom")
			},
			// 申请代开
			sqdkBtn() {
				uni.navigateTo({
					url: "/pages/dkfpsq/kjfp?sbId=" + "",
				})
			},
			// 获取授权状态
			async getSqzt() {
				let res = await getTyByQO({
					type: "fpdksqzt"
				})
				if (res.body && res.head.errorCode == "0") {
					this.sqztArr = res.body
				}
			},
		}
	}
</script>

<style>
	.main {
		width: calc(100% - 40rpx);
		padding: 20rpx;
		min-height: 100vh;
	}

	.xzsq {
		font-size: 30rpx;
		background-color: #ffffff;
		font-weight: bold;
		padding: 20rpx;
		color: #518ff5;
		text-align: center;
		border: 1px solid #0000006b;
	}

	.item {
		display: flex;
		font-size: 26rpx;
		background-color: #ffffff;
		font-weight: bold;
		padding: 20rpx;
		align-items: center;
		word-break: break-all;
	}

	.item>.name {
		text-align: left;
		width: 160rpx;
		margin-right: 20rpx;
		color: #66666699;
	}

	.item .val {
		text-align: left;
	}

	.xzk {
		font-size: 32rpx;
	}

	.box {
		margin: 30rpx 0;
		border-radius: 10rpx;
		overflow: hidden;
		border: 1px solid #0000006b;
	}

	.title {
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0 5rpx 0;
		align-items: center;
		font-weight: bold;
	}

	.title>.search {
		color: #3d8fff;
		font-size: 26rpx;
	}

	.sqBtn {
		text-align: center;
		width: 100%;
		display: flex;
		background-color: #ffffff;
		justify-content: space-around;
		border-top: 2rpx solid #00000033;
		margin-top: 10rpx;
	}

	.sqBtn>.btnItem {
		padding: 28rpx;
		width: 50%;
		border-right: 2rpx solid #00000033;
	}

	.btysq {
		color: red;
	}

	.tysq {
		color: #518ff5;
	}

	.qxsq {
		color: red;
		border-right: 0 !important;
	}

	.conSearch {
		background: #ffffff;
		min-height: 30vh;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		padding: 20rpx;
	}

	.conSearch>.cxTitle {
		font-size: 30rpx;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
	}

	.conSearch>.xzItem {
		padding: 20rpx;
		font-size: 26rpx;
	}

	.xzItem>.con {
		padding: 20rpx 0;
		font-size: 30rpx;
		border-bottom: 2rpx solid #0000001a;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.btn {
		text-align: center;
		width: 100%;
		padding: 10rpx 0 0 0;
		background-color: #ffffff;

	}

	.btn uni-button {
		width: 250rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin: 0 20rpx;

	}

	.sqrxx {
		display: flex;
		align-items: center;
		width: calc(100% - 180rpx);
	}

	.sqrxx>.val {
		width: calc(100% - 100rpx);
	}

	.sqztDqr {
		width: 90rpx;
		padding: 8rpx;
		border: 2rpx solid #fac836;
		border-radius: 5rpx;
		color: #fac836;
		text-align: center;
	}

	.sqztYzf {
		padding: 8rpx;
		border: 2rpx solid red;
		border-radius: 5rpx;
		color: red;
		text-align: center;
	}

	.sqztYsx {
		padding: 8rpx;
		border: 2rpx solid #518ff5;
		border-radius: 5rpx;
		color: #518ff5;
		text-align: center;
	}
</style>